import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

export default function Home() {
    // 当我们针对点击事件,要进行二次路由导航的时候,可以使用useNavigate
    // useNavigate方法调用之后会返回一个navigaet
    // navigaet后面直接书写路径,这种方式成为编程式路由导航
    const navigaet = useNavigate()

    const toMusicHandle=()=>{
        // 这里可以用到路由传参,navigaet后面可以拼接查询数据
        navigaet('/main/home/music?user=周杰伦&id=001')
    }
    const toNewsHandle=()=>{
        navigaet('/main/home/news?user=赵丽颖&id=002')
    }
  return (
    <div>
        <div>我是Home的内容区</div>
        <button onClick={toMusicHandle}>Music</button>
        <button onClick={toNewsHandle}>News</button>
        <Outlet/>
    </div>
  )
}
